<template>
    <div class="bet_row" >
      <div class="title">{{title}}</div>
      <div class="group">

        <div class="wrap_k3" :style="rowStyle" v-for="(item, index) in betRows" :key="index">
          <div :class="choose.includes(index)? 'button_k3_act' : 'button_k3'" @click="buttonK3Click(index)">
            <div class="show">
              <span v-if="item.word">{{item.word}}</span>
              <img v-if="item.num" v-for="(n, i) in item.num" :key="i" class="dice_img" :src="k3num[n - 1]">
            </div>
            <div class="odds">{{item.odds}}</div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import baseData from '../../config/BaseData';
    export default {
      name: "BetRow",
      props: {
          title: '',
          rowNum: '',
          betRows: {
              type: Array,
              default: []
          }
      },
      data(){
          return {
            choose: [],
              rowStyle: this.rowNum == 3? 'width: 33.33%': 'width: 50%',
              // 色子
              k3num: baseData.k3num
          }
      },
      created() {
        //this.rowWidth = (1/this.rowNum * 100) + '%';
      },
      methods: {
        buttonK3Click(index){
          let flag = true;
          this.choose = this.choose.filter((val)=>{
            if(val == index){
              flag = false
            }
            return val != index
          })
          if(flag){
            this.choose.push(index)
          }

          this.$emit('chooseBetNum', this.choose, flag)
        }
      }
    }
</script>

<style lang="less" scoped>

  .bet_row .title{
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
    justify-content: space-between;
    color: #856c9c;
    padding: 10px 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #f2f2f2;
  }

  .bet_row .group{
    display: flex;
    flex: 1 1;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    .wrap_k3{
      width: 50%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 6px;

      .button_k3{
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        flex: 1 1;
        width: 100%;
        border: 1px solid transparent;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 0 8px;
        height: 50px;
        -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.3);
        box-shadow: 0 1px 4px rgba(0,0,0,.3);
        border-radius: 16px;
        font-size: 16px;
        white-space: nowrap;

        .show{
          color: #3f3f3f;
          -ms-flex-pack: center;
          justify-content: center;

          .dice_img{
            width: 32px;
            height: 32px;
          }
        }

        .odds{
          color: #ff6c2c;
        }
      }

      .button_k3_act{
        flex: 1 1;
        width: 100%;
        border: 1px solid transparent;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 0 12px;
        height: 50px;
        -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.3);
        box-shadow: 0 1px 4px rgba(0,0,0,.3);
        border-radius: 8px;
        font-size: 16px;
        white-space: nowrap;
        border: 1px solid #ff7d2e;
        -webkit-box-shadow: 0 1px 4px rgba(62,49,77,.3);
        box-shadow: 0 1px 4px rgba(62,49,77,.3);
        background-color: #fff2ea;

        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        .show{
          color: #3f3f3f;
          -ms-flex-pack: center;
          justify-content: center;

          .dice_img{
            width: 32px;
            height: 32px;
          }
        }

        .odds{
          color: #ff6c2c;
        }
      }

    }
  }
</style>
